<template>
  <a-table
    :columns="columns"
    :data-source="batchTableData"
    :pagination="false"
    :scroll="{ x: 1200 }"
  >
    <span slot="logisticsName" slot-scope="text, record">
      <a-icon
        type="check-circle"
        style="color: #3eae7c"
        v-if="record.sign === '1'"
      />
      <a-icon
        type="close-circle"
        style="color: #f5222d"
        v-if="record.sign === '0'"
      />
      {{ record.logisticsName }}
    </span>
    <span
      slot="applyState"
      slot-scope="text, record"
      :style="
        record.applyState === '暂缓处理'
          ? 'color:#ff9933'
          : record.applyState === '异常订单'
          ? 'color:#F3381D'
          : 'color:#3eae7c'
      "
    >
      {{ record.applyState }}
    </span>
    <span slot="scanNumber" slot-scope="text, record">
      {{ record.scanNumber === null ? "0" : record.scanNumber }}
    </span>
    <span slot="orderNumber" slot-scope="text, record">
      {{ record.orderNumber === null ? "0" : record.orderNumber }}
    </span>
    <span slot="remark" slot-scope="text, record">
      {{
        record.remark === null
          ? "暂无"
          : record.remark === ""
          ? "暂无"
          : record.remark
      }}
    </span>

    <span slot="action" class="action" slot-scope="text, record">
      <a
        :style="
          record.claimName
            ? 'color: #ccc; border-bottom: 1px solid #ccc'
            : 'color: #2929e0; border-bottom: 1px solid #2929e0'
        "
        :disabled="record.claimName"
        v-if="batchState === '2'"
        slot="action"
        href="javascript:;"
        @click="claimBath(record)"
        >{{ record.claimName ? "已认领" : "认领" }}</a
      >
      <a-divider v-if="batchState === '2'" type="vertical" />
      <a
        :style="
          record.orderNumber * 1 <= 0
            ? 'color: #ccc; border-bottom: 1px solid #ccc'
            : 'color: #2929e0; border-bottom: 1px solid #2929e0'
        "
        :disabled="record.orderNumber * 1 <= 0"
        slot="action"
        href="javascript:;"
        @click="printExcel(record)"
        >拣货单</a
      >
      <a-divider type="vertical" />
      <a
        :style="
          record.orderNumber * 1 <= 0
            ? 'color: #ccc; border-bottom: 1px solid #ccc'
            : 'color: #2929e0; border-bottom: 1px solid #2929e0'
        "
        slot="action"
        href="javascript:;"
        @click="printerPDF(record)"
        :disabled="record.orderNumber * 1 <= 0"
        >打印运单</a
      >
      <a-divider type="vertical" />
      <a slot="action" href="javascript:;" @click="editRow(record)">订单列表</a>
    </span>
  </a-table>
</template>

<script>
import req from "@/utils/req";
import {
  OutBound_batchDowWay,
  OutBound_dowExcel,
  OutBound_batchClaim,
} from "@/apis/system/WM/OutOrder";
export default {
  props: ["batchTableData", "batchState", "getBatchTableList"],
  data() {
    return {};
  },
  computed: {
    columns() {
      return [
        {
          title: "仓库",
          dataIndex: "warehouseName",
          align: "center",
          // scopedSlots: { customRender: "selfClassifyName" },
          width: "10%",
        },
        {
          title: "批次号",
          dataIndex: "bachNo",
          align: "center",
          width: "13%",
        },
        {
          title: "批次名称",
          dataIndex: "bachName",
          scopedSlots: { customRender: "bachName" },
          align: "center",
          width: "8%",
        },
        {
          title: "订单数",
          dataIndex: "orderNumber",
          scopedSlots: { customRender: "orderNumber" },
          align: "center",
          width: "10%",
        },
        {
          title: "扫描SKU订单数",
          dataIndex: "scanNumber",
          scopedSlots: { customRender: "scanNumber" },
          align: "center",
          width: "10%",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          //   scopedSlots: { customRender: "createTime" },
          align: "center",
          width: "10%",
        },

        {
          title: "备注",
          dataIndex: "remark",
          scopedSlots: { customRender: "remark" },
          align: "center",
          width: "12%",
        },
        {
          title: "认领人",
          dataIndex: "claimName",
          scopedSlots: { customRender: "claimName" },
          align: "center",
          width: "13%",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: 300,
          fixed: "right",
        },
      ];
    },
  },
  methods: {
    //认领批次
    async claimBath(record) {
      let { code } = await OutBound_batchClaim(record.key);
      if (code === "10000") {
        this.getBatchTableList();
      }
    },
    async printerPDF(record) {
      if (record.orderNumber === null) {
        this.$message.error("该批次还没有加入订单！");
        return false;
      }
      let res = await OutBound_batchDowWay(`pam=${record.bachNo}`);
      req.exportPDF(record.bachNo, res);
    },
    editRow(record) {
      setTimeout(() => {
        this.$bus.$emit("BatchManageModal", record, this.batchState);
      }, 50);
    },
    async printExcel(record) {
      if (record.orderNumber === null) {
        this.$message.error("该批次还没有加入订单！");
        return false;
      }
      let res = await OutBound_dowExcel(`pam=${record.bachNo}`);
      req.exportFile(record.bachNo, res);
    },
  },
};
</script>

<style lang="less" scoped>
.action {
  a {
    border-bottom: 1px solid rgb(41, 41, 224);
    color: rgb(41, 41, 224);
  }
}
</style>
